﻿@model WebExtras.DemoApp.Models.Mvc.CoreFormViewModel

@{
  ViewBag.Title = "Mvc Bootstrap Form Helper Extensions";
}

<h3 class="keep-center">Mvc Bootstrap Form Helper Extensions</h3>

<div class="row-fluid">
  <div class="span6">
    <div class="row-fluid">
      <div class="span3">
        <strong>Assembly</strong>
      </div>
      <div class="span4">
        WebExtras.Mvc.dll
      </div>
    </div>
    <div class="row-fluid">
      <div class="span3">
        <strong>Namespace</strong>
      </div>
      <div class="span4">
        WebExtras.Mvc.Bootstrap
      </div>
    </div>
  </div>
  <div class="span6">
    <div class="span3">
      <strong>Dependancies</strong>
    </div>
    <div class="span6">
      <ul class="dependancies">
        <li>Bootstrap 2.3.x</li>
        <li>Font Awesome 4.0 and below</li>
        <li>@Html.Hyperlink("Bootstrap Datetime picker", "http://www.malot.fr/bootstrap-datetimepicker")</li>
        <li>webextras.bootstrap.css</li>
      </ul>
    </div>
  </div>
</div>

<div class="well">
  <h4>Creating special buttons</h4>
  <p>Special buttons can be created by decorating hyperlinks and basic buttons with the appropriate special button type</p>

  <p>Markup</p>
  <pre><code>
@@Html.Hyperlink("Take me to google", "http://www.google.com")
    .AsButton(EBootstrapButton.Default)

@@Html.Button(EButton.Regular, "Take me to google", "window.location='http://www.google.com.au'")
    .AsButton(EBootstrapButton.Inverse, EBootstrapButton.Large)
  </code></pre>
  @{
    const string msg = "You can create a button of type <strong>EButton.Cancel</strong> which takes you back to the previous page. When a button of this" +
                       "type is created, any onclick event specified will be blatantly ignored.";
  }
  @Html.Alert(EMessage.Warning, msg, string.Empty, EFontAwesomeIcon.Flag)
  <p>Output</p>
  <div class="content">
    <p>
      @Html.Hyperlink("Take me to google", "http://www.google.com").AsButton(EBootstrapButton.Default)
      @Html.Hyperlink("Take me to google", "http://www.google.com").AsButton(EBootstrapButton.Primary)
      @Html.Button(EButton.Cancel, "Take me back").AsButton(EBootstrapButton.Danger)
    </p>
    <p>
      @Html.Hyperlink("Take me to google", "http://www.google.com").AsButton(EBootstrapButton.Info, EBootstrapButton.Small)
      @Html.Hyperlink("Take me to google", "http://www.google.com").AsButton(EBootstrapButton.Warning, EBootstrapButton.Mini)
      @Html.Button(EButton.Regular, "Take me to google", "goToGoogle()").AsButton(EBootstrapButton.Inverse, EBootstrapButton.Large)
    </p>
  </div>
  <p>All available extensions</p>
  <pre><code>
.AsButton(type)
  </code></pre>
  @Html.Alert(EMessage.Warning, "Note that this extension can only be used for hyperlinks and button elements", string.Empty, EFontAwesomeIcon.Flag)
</div>

<div class="well">
  <h4>Date time pickers</h4>
  <p>
    WebExtras provides helper methods for rendering a date time picker attached to a textbox by using a great little date time picker
    provided by Sébastien Malot. You can get a copy of the date time picker from @Html.Hyperlink("here.", "http://www.malot.fr/bootstrap-datetimepicker")
  </p>
  <p>Markup</p>
  <pre><code>
@@Html.DateTimeTextBoxFor(f => f.DateTextBox, new PickerOptions { format = "yyyy-mm-dd", View = EPickerView.Date })
@@Html.DateTimeTextBoxFor(f => f.TimeTextBox, new PickerOptions { format = "hh:ii", View = EPickerView.Time })
@@Html.DateTimeTextBoxFor(f => f.DateTimeTextBox)
  </code></pre>
  @Html.Alert(EMessage.Warning, "Note that this date time picker uses 'i' for minutes", string.Empty, EFontAwesomeIcon.Flag)
  <p>Output</p>
  <div class="content">
    <div class="row-fluid keep-center">
      <div class="span4">Date only picker</div>
      <div class="span4">Time only picker</div>
      <div class="span4">Date and time picker</div>
    </div>
    <div class="row-fluid keep-center">
      <div class="span4">
        @Html.DateTimeTextBoxFor(f => f.DateTextBox, new PickerOptions { format = "yyyy-mm-dd", View = EPickerView.Date })
      </div>
      <div class="span4">
        @Html.DateTimeTextBoxFor(f => f.TimeTextBox, new PickerOptions { format = "hh:ii", View = EPickerView.Time })
      </div>
      <div class="span4">
        @Html.DateTimeTextBoxFor(f => f.DateTimeTextBox)
      </div>
    </div>
  </div>
  <p>A slight gotcha with the time only picker is that the date will always be fixed to 31 December 1899. </p>
</div>

<div class="well">
  <h4>Manipulating lists</h4>
  <div class="row-fluid">
    <div class="span6">
      <p>Unstyled lists can be created by using the <strong>AsUnstyled()</strong> decorator.</p>
      <p>Markup</p>
      <pre><code>
@@Html.List(EList.Unordered, new HtmlListItem[] { 
  new HtmlListItem("list item 1"),
  new HtmlListItem("list item 2"),
  new HtmlListItem("list item 3"),
  new HtmlListItem("list item 4"),
  new HtmlListItem("list item 5")
}).AsUnstyled()
  </code></pre>
      <p>Output</p>
      <div class="content">
        @Html.List(EList.Unordered, new HtmlListItem[] { 
      new HtmlListItem("list item 1"),
      new HtmlListItem("list item 2"),
      new HtmlListItem("list item 3"),
      new HtmlListItem("list item 4"),
      new HtmlListItem("list item 5")
    }).AsUnstyled()
      </div>
    </div>
    <div class="span6">
      <p>Inline lists can be created by using the <strong>AsInline()</strong> decorator.</p>
      <p>Markup</p>
      <pre><code>
@@Html.List(EList.Unordered, new HtmlListItem[] { 
  new HtmlListItem("list item 1"),
  new HtmlListItem("list item 2"),
  new HtmlListItem("list item 3"),
  new HtmlListItem("list item 4"),
  new HtmlListItem("list item 5")
}).AsInline()
  </code></pre>
      <p>Output</p>
      <div class="content">
        @Html.List(EList.Unordered, new HtmlListItem[] { 
      new HtmlListItem("list item 1"),
      new HtmlListItem("list item 2"),
      new HtmlListItem("list item 3"),
      new HtmlListItem("list item 4"),
      new HtmlListItem("list item 5")
    }).AsInline()
      </div>
    </div>
  </div>
</div>
